import React, { PureComponent, Fragment } from 'react';
import { connect, routerRedux } from 'dva';
import { Spin } from 'antd';
import myStyle from '../index.less';
import CardC from '../../workStation/Barra/comps/cardC';
import productBg from '../../../assets/busi/userView/product_bg.png';
import { nice } from 'd3';

@connect(({ loading, productInfoM }) => ({
  loading,
  productInfoM,
}))
export default class ProductInfo extends PureComponent {
  state = {
    infos: {},
  };
  UNSAFE_componentWillMount() {
    this.props.dispatch({
      type: 'productInfoM/getProductInfo',
      payload: {},
      callback: (data) => {
        this.setState({
          infos: data || {},
        });
      },
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {}
  //展示内容
  showContent = () => {
    const { loading } = this.props;
    const { scaleMax = {}, holdMost = {}, profitMax = {}, yieldHighest = {}, leverageHighest = {}, currentEvents = [] } = this.state.infos;
    return (
      <Spin spinning={loading.effects['productInfoM/getProductInfo'] == true}>
        <div className={myStyle.info}>
          <img src={productBg} />
          <div className={myStyle.singleRow}>
            <span>规模最大：</span>
            <div className={myStyle.codeRow}>
              <span
                style={{ textDecoration: scaleMax.portfolioCode ? '' : 'none', color: scaleMax.portfolioCode ? undefined : 'inherit' }}
                onClick={() => this.goToPath(scaleMax)}
                title={scaleMax.portfolioCode ? scaleMax.portfolioCode + '-' + scaleMax.portfolioName : ''}
              >
                {scaleMax.portfolioCode ? scaleMax.portfolioCode + '-' + scaleMax.portfolioName : '--'}
              </span>
              <span>{typeof scaleMax.value == 'number' ? scaleMax.value.toFixed(2) : '--'}亿元</span>
            </div>
          </div>
          <div className={myStyle.singleRow}>
            <span>持仓最多：</span>
            <div className={myStyle.codeRow}>
              <span
                style={{ textDecoration: holdMost.portfolioCode ? '' : 'none', color: holdMost.portfolioCode ? undefined : 'inherit' }}
                onClick={() => this.goToPath(holdMost)}
                title={holdMost.portfolioCode ? holdMost.portfolioCode + '-' + holdMost.portfolioName : ''}
              >
                {holdMost.portfolioCode ? holdMost.portfolioCode + '-' + holdMost.portfolioName : '--'}
              </span>
              <span>{holdMost.value ?? null ? holdMost.value : '--'}只</span>
            </div>
          </div>
          <div className={myStyle.singleRow}>
            <span>近一年盈利最大：</span>
            <div className={myStyle.codeRow}>
              <span
                style={{ textDecoration: profitMax.portfolioCode ? '' : 'none', color: profitMax.portfolioCode ? undefined : 'inherit' }}
                onClick={() => this.goToPath(profitMax)}
                title={profitMax.portfolioCode ? profitMax.portfolioCode + '-' + profitMax.portfolioName : ''}
              >
                {profitMax.portfolioCode ? profitMax.portfolioCode + '-' + profitMax.portfolioName : '--'}
              </span>
              <span className={profitMax.value ?? null ? (profitMax.value > 0 ? myStyle.red : myStyle.green) : ''}>
                {profitMax.value ?? null ? (profitMax.value * 1).toFixed(2) : '--'}元
              </span>
            </div>
          </div>
          <div className={myStyle.singleRow}>
            <span>近一年收益率最高：</span>
            <div className={myStyle.codeRow}>
              <span
                style={{ textDecoration: yieldHighest.portfolioCode ? '' : 'none', color: yieldHighest.portfolioCode ? undefined : 'inherit' }}
                onClick={() => this.goToPath(yieldHighest)}
                title={yieldHighest.portfolioCode ? yieldHighest.portfolioCode + '-' + yieldHighest.portfolioName : ''}
              >
                {yieldHighest.portfolioCode ? yieldHighest.portfolioCode + '-' + yieldHighest.portfolioName : '--'}
              </span>
              <span className={yieldHighest.value ?? null ? (yieldHighest.value > 0 ? myStyle.red : myStyle.green) : ''}>
                {yieldHighest.value ?? null ? (yieldHighest.value * 100).toFixed(2) : '--'}%
              </span>
            </div>
          </div>
          <div className={myStyle.singleRow}>
            <span>杠杆率最高: </span>
            <div className={myStyle.codeRow}>
              <span
                style={{ textDecoration: leverageHighest.portfolioCode ? '' : 'none', color: leverageHighest.portfolioCode ? undefined : 'inherit' }}
                onClick={() => this.goToPath(leverageHighest)}
                title={leverageHighest.portfolioCode ? leverageHighest.portfolioCode + '-' + leverageHighest.portfolioName : ''}
              >
                {leverageHighest.portfolioCode ? leverageHighest.portfolioCode + '-' + leverageHighest.portfolioName : '--'}
              </span>
              <span>{leverageHighest.value ?? null ? (leverageHighest.value * 100).toFixed(2) : '--'}%</span>
            </div>
          </div>
          <div className={myStyle.DateEvents}>
            <span>当日大事记：</span>
            <ul>
              {currentEvents.length ? (
                currentEvents.map((item, index) => {
                  return (
                    <li key={index} className={myStyle.codeRow}>
                      <span onClick={() => this.goToPath(item)} title={item.portfolioCode ? item.portfolioCode + '-' + item.portfolioName : ''}>
                        {item.portfolioCode ? item.portfolioCode + '-' + item.portfolioName : '--'}
                      </span>
                      <span title={item.desc}>{item.desc || '--'}</span>
                    </li>
                  );
                })
              ) : (
                <li className={myStyle.codeRow}>
                  <span style={{ color: 'inherit', textDecoration: 'inherit' }}>--</span>
                  <span>--</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </Spin>
    );
  };
  //跳转到绩效分析/组合概览
  goToPath = (item) => {
    if (JSON.stringify(item) == '{}' || !item?.portfolioCode) return;
    let profitOverview = {
      needPenetrate: '0', //固定
      portfolioCode: item.portfolioCode, //产品code
      portfolioName: item.portfolioName, //产品名称
      timeRange: '4', //固定
      timeStamp: new Date().getTime(),
    };
    //将条件缓存
    sessionStorage.setItem('profitOverview', JSON.stringify(profitOverview));

    //跳转绩效分析/组合概览
    this.props.dispatch(routerRedux.push(`/performanceAnalysis/profitOverview`));
  };
  render() {
    return (
      <div>
        <CardC title='产品信息' type='24' noVideo={true} titleIsShow={false} content={this.showContent()} />
      </div>
    );
  }
}
